import React, { useState } from "react";
// import { connect,  } from 'react-redux'
// import { add, minus, asyncAdd } from '../../actions/counter'
import { View, Image } from "@tarojs/components";
import titleBg from "./imgs/home-title.png";
import iconAddMember from "./imgs/icon-add-member.png";
// import iconPurpleLevel from "./imgs/icon-level-purple.png";
import Tabs from "@/components/Tabs";
import { useDidShow, getTabBar, getCurrentInstance } from "@tarojs/taro";
import Prime from "./components/Prime";
import Level from "@/components/Level";
import MemberNum from "@/components/MemberNum";

import "./index.less";

// @connect(({ counter }) => ({
//   counter
// }), (dispatch) => ({
//   add () {
//     dispatch(add())
//   },
//   dec () {
//     dispatch(minus())
//   },
//   asyncAdd () {
//     dispatch(asyncAdd())
//   }
// }))
const TAB_LIST = [
  {
    id: "prime",
    name: "圈主甄选",
    children: <Prime />,
  },
  {
    id: "grass",
    name: "种草分享",
    children: "种草分享",
  },
];
const Index = () => {
  const [activeId, setActiveId] = useState(TAB_LIST[0].id);
  useDidShow(() => {
    const tabbar = getTabBar(getCurrentInstance().page);
    tabbar?.setSelected("home");
  });
  return (
    <View id="index-page" className="index">
      <View className="content">
        <View className="header">
          <View className="bg-circle"></View>
          <View className="header-title">Hi,欢迎来这里</View>
        </View>
        <View className="ownner-container">
          <Image className="ownner-container-bg" src={titleBg}></Image>
          <View className="ownner">
            <View className="avatar"></View>
            <View className="name">草莓风味的圈子</View>
            <View className="level-cont">
              <Level level="purple" />
            </View>
            <View className="member-cont">
              <MemberNum count="900+" />
            </View>
            <View className="add-member">
              <Image className="icon-img" src={iconAddMember}></Image>
            </View>
            <View className="description">
              甄选大牌正品，优良精品。由京东，天猫，山姆，国企的直供商发货，值得信赖，带来更多生活的小美好。
            </View>
          </View>
        </View>
        <View className="body">
          <Tabs
            list={TAB_LIST}
            activeId={activeId}
            onChange={(id) => {
              setActiveId(id);
            }}
          ></Tabs>
          {/* <tabs :items="tabList" :activeId="activeId" @change="onTabClick">
            <template v-slot:prime> <primeList /> </template>
            <template v-slot:share> 种草分享-列表 </template>
          </tabs> */}
        </View>
      </View>
      {/* <tabbar :current-page="0"></tabbar> */}
    </View>
  );
};

export default Index;
